<template>
    <div class="comp-header">
        <mu-appbar :title="title" style="width: 100%;" color="primary" class="headerComponent">
        <mu-button icon slot="left" style="margin-right: 8rem" @click="back">
            <mu-icon value="arrow_back"></mu-icon>
        </mu-button>
        <!-- <router-link to="/" tag="span">{{title}}</router-link> -->
        <mu-button flat slot="right" :to="to" tag="span" style="width: 60px;">{{rightContent}}</mu-button>
    </mu-appbar>
    <div style="height: 56px;"></div>
    </div>
</template>
<style lang="scss">
.comp-header {
    .headerComponent {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        .mu-appbar-left {
            width: 60px;
        }
        .mu-appbar-title{
            text-align: center;
        }
    }
}
</style>
<script>
export default {
    // 接收属性
    // props: ['title', 'rightContent', 'to'],
    props: {
        title: String,
        rightContent: String,
        to: {
            default: ''
        }
    },
    // 方法
    methods: {
        back() {
            // 返回上一页
            this.$router.go(-1);
        }
    }
}
</script>